<template>
	<view class="content">
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" fontSize="24rpx" activeColor="#000000"
			lineColor="#000000" paddingItem="28rpx"></v-tabs>
		<scroll-view class="infoBox" v-if="data" scroll-y="true" @scrolltolower="getMore()">
			<view class="item" v-for="(item,index) in data" :key="index"
				@click="info(item.payment_status,item.service_status,item.id,item.service_id)">
				<view class="topBox">
					<view class="orderNum">
						订单编号：{{item.code}}
					</view>
					<view class="orderState" v-if="item.payment_status==1&&item.service_status!=4">
						待付款
					</view>
					<view class="orderState" v-else-if="item.payment_status==2&&item.service_status==1">
						待服务
					</view>
					<view class="orderState" v-else-if="item.payment_status==2&&item.service_status==2">
						服务中
					</view>
					<view class="orderState" v-else-if="item.payment_status==2&&item.service_status==3">
						已完成
					</view>
					<view class="orderState" v-else-if="(item.payment_status==2&&item.service_status==4) || (item.payment_status==1&&item.service_status==4)">
						已取消
					</view>
				</view>
				<view class="centerBox">
					<image :src="item.cover" class="poster"></image>
					<text class="name ellipsis">
						{{item.name}}
					</text>
					<text class="num">
						X {{item.num}}
					</text>
					<text class="price">
						￥{{item.price}}
					</text>
				</view>
				<view class="bottomBox">
					<text class="allPrice">
						合计:￥{{item.amount}}
					</text>
					<view class="rightBox">
						<!-- 立即取消 -->
						<view class="cancel" v-if="[1, 2].includes(item.payment_status) && item.service_status == 1"
							@click.stop="cancel(item.id)">
							{{btn[0]}}
						</view>
						<!-- 修改订单 -->
						<view class="info" v-if="item.payment_status==2&&item.service_status==1"
							@click="$navto.navto('/pages/myorder_modify/myorder_modify', {id: item.id})">
							{{btn[5]}}
						</view>
						<!-- 修改订单 -->
						<view class="cancel" v-if="item.payment_status==2&&item.service_status==2"
							@click="$navto.navto('/pages/myorder_modify/myorder_modify', {id: item.id})">
							{{btn[5]}}
						</view>
						<!-- 立即付款 -->
						<view class="info" v-if="item.payment_status==1&&item.service_status==1&&item.cat_id!=2">
							{{btn[1]}}
						</view>
						<!-- 开发票 -->
						<view class="cancel" v-if="item.payment_status==2&&item.service_status==3"
							@click="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:1})">
							{{btn[4]}}
						</view>
						<!-- 立即评价 -->
						<view class="info" v-if="item.payment_status==2&&item.service_status==3"
							@click="$navto.navto('/pages/myorder_evaluation/myorder_evaluation', {id: item.id,service_id:item.service_id})">
							{{btn[3]}}
						</view>
						<!-- 查看详情 -->
						<view class="info"
							v-if="(item.payment_status==2&&item.service_status==2) || (item.payment_status==2&&item.service_status==4)">
							{{btn[2]}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="noOrderBox" v-else>
			<image :src="baseUrl+'img/my/noOrder.png'" class="noOrderIcon"></image>
			<view class="noOrderText">
				暂无订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				isOrder: false,
				current: 0,
				tabs: ['全部', '待付款', '待服务', '服务中', '已完成', '已取消'],
				btn: ['取消订单', '立即付款', '查看详情', '立即评价', '开发票', '修改订单'],
				page: 1,
				data: [],
				type: 1, //1全部 2待付款 3待服务 4服务中 5已完成 6已取消
				hasMore: true, // 标志位，表示是否还有更多数据
			}
		},
		onLoad(options) {
			this.current = options.current;
			this.type = options.type;
		},
		onShow() {
			const returnData = getApp().globalData.returnData || {};
			if (returnData.back == 1) {
				this.data = this.data.filter(item => item.server_id != returnData.id);
				getApp().globalData.returnData = null;
			}
			this.page = 1;
			this.data = [];
			console.log("执行");
			console.log(this.token);
			if (this.token) {
				if (this.type == 1) {
					this.getAllData();
				} else {
					this.getData();
				}
				console.log("类别" + this.type);
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							if (this.type == 1) {
								this.getAllData();
							} else {
								this.getData();
							}
						}
					}
				);
			}
		},
		methods: {
			info(num1, num2, id, service_id) { //跳转详情页面
				if (num1 == 1 && num2 == 1) { //待付款
					this.$navto.navto("/pages/myorder_waitpay/myorder_waitpay", {
						id: id,
						admin:1//不是管理员
					})
				}
				if (num1 == 2 && num2 == 1) { //待服务
					this.$navto.navto("/pages/myorder_waitservice/myorder_waitservice", {
						id: id,
						status: num2
					})
				}
				if (num1 == 2 && num2 == 2) { //服务中和待服务一样
					this.$navto.navto("/pages/myorder_waitservice/myorder_waitservice", {
						id: id,
						status: num2
					})
				}
				if (num1 == 2 && num2 == 3) { //已完成
					this.$navto.navto("/pages/myorder_complete/myorder_complete", {
						id: id,
						service_id: service_id
					})
				}
			},
			//取消
			cancel(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该订单',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`cancelOrder?id=${id}&type=cancel`).then(res => {
								if (res.data.code == 10000) {
									// 手动从 this.data 中移除被取消的订单
									this.data = this.data.filter(item => item.id !== id);
									this.$toast('取消成功');
								} else {
									this.$toast('取消失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getMore() {
				if (!this.hasMore) {
					console.log('没有更多数据了');
					return; // 如果没有更多数据，直接返回
				}
				console.log('加载更多');
				this.page++;
				this.getData();
			},
			//3待服务 4服务中 5已完成 6已取消
			getOtherData() { //查询其他订单
				this.$request.get(`paidList?service_status=${this.type - 2}&page=${this.page}`).then(res => {
					const newData = res.data.data;
					if (newData.length > 0) {
						this.data.push(...newData);
					} else {
						this.hasMore = false;
					}
				});
			},
			getWaitData() { //查询待付款订单
				this.$request.get(`dueList?page=${this.page}`).then(res => {
					const newData = res.data.data;
					if (newData.length > 0) {
						this.data.push(...newData);
					} else {
						this.hasMore = false;
					}
				});
			},
			getAllData() { //查询全部订单
				this.$request.get(`userOrderList?page=${this.page}`).then(res => {
					const newData = res.data.data;
					if (newData.length > 0) {
						this.data.push(...newData);
					} else {
						this.hasMore = false;
					}
				});
			},
			getData() {
				if (this.type == 1) {
					this.getAllData(); //全部
				}
				if (this.type == 2) { //待付款
					this.getWaitData();
				}
				if (this.type >= 3) { //待服务
					this.getOtherData();
				}
			},
			changeTab(index) {
				this.data = [];
				this.page = 1;
				this.type = index + 1;
				this.hasMore = true; // 重置 hasMore 标志位
				this.getData();
				console.log('当前选中的项：' + index);
			},
		},
		computed: {
			...mapState(['token']),
		},
	}
</script>

<style lang="scss">
	.noOrderBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.noOrderIcon {
			width: 100rpx;
			height: 100rpx;
			margin-top: 508rpx;
		}

		.noOrderText {
			font-weight: 500;
			font-size: 28rpx;
			color: #8E8E8E;
			letter-spacing: 6rpx;
			margin-top: 40rpx;
		}
	}

	.infoBox {
		width: 100%;
		height: 85vh;
		overflow-y: scroll;
		margin-top: 30rpx;
		padding-left: 40rpx;

		.item {
			position: relative;
			width: 670rpx;
			height: 390rpx;
			border-radius: 6rpx;
			background: #ffffff;
			margin-bottom: 30rpx;

			.bottomBox {
				width: 100%;
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.rightBox {
					display: flex;

					.info {
						width: 140rpx;
						height: 54rpx;
						border-radius: 6rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						background-color: #121212;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1rpx solid #121212;
						margin-right: 30rpx;
						letter-spacing: 5rpx;
					}

					.cancel {
						width: 140rpx;
						height: 54rpx;
						border-radius: 6rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #121212;
						border: 1rpx solid #121212;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 15rpx;
						letter-spacing: 5rpx;
					}
				}

				.allPrice {
					color: #121212;
					font-weight: 700;
					font-size: 24rpx;
					margin-left: 30rpx;
					letter-spacing: 5rpx;
				}
			}

			.centerBox {
				width: 100%;
				height: 208rpx;
				border-bottom: 1rpx solid #E7E6E7;
				display: flex;
				align-items: center;

				.price {
					position: absolute;
					color: #121212;
					font-weight: 500;
					font-size: 26rpx;
					left: 288rpx;
					top: 230rpx;
					letter-spacing: 5rpx;
				}

				.num {
					position: absolute;
					color: #8e8e8e;
					font-weight: 500;
					font-size: 18rpx;
					left: 288rpx;
					top: 178rpx;
				}

				.name {
					position: absolute;
					font-weight: 700;
					width: 380rpx;
					font-size: 28rpx;
					color: #121212;
					left: 288rpx;
					top: 120rpx;
					letter-spacing: 5rpx;
				}

				.poster {
					width: 200rpx;
					height: 150rpx;
					margin-left: 30rpx;
					border-radius: 10rpx;
				}
			}

			.topBox {
				height: 82rpx;
				border-bottom: 1rpx solid #E7E6E7;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.orderState {
					font-weight: 500;
					color: #121212;
					font-size: 24rpx;
				}

				.orderNum {
					font-weight: 500;
					font-size: 24rpx;
					color: #121212;
				}
			}
		}
	}

	.v-tabs__container-item {
		// font-size: 24rpx !important;
	}

	.active {
		font-size: 30rpx !important;
		font-weight: 700 !important;
	}

	.v-tabs__container-line {
		height: 4rpx !important;
	}

	.v-tabs__container {
		background-color: #fff !important;
		height: 120rpx !important;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #fafafa;
	}
</style>